{include file="public/header" /}
<style type="text/css">

	.layui-btn {
	    background-color: #FF7159 !important;
	}
    .layui-btn:hover {
	    opacity: .8;
	    filter: alpha(opacity=80);
	    color: #fff;
    }
	a:hover {
	    color: #777;
	}
	.layui-btn-xs {
	    height: 22px;
	    line-height: 22px;
	    padding: 0 5px;
	    font-size: 12px;
	}
	.layui-btn {
	    display: inline-block;
	    height: 27px;
	    line-height: 27px;
	    padding: 0 7px;
	    background-color: #009688;
	    color: #fff;
	    white-space: nowrap;
	    text-align: center;
	    font-size: 10px;
	    border: none;
	    border-radius: 2px;
	    cursor: pointer;
	}
	.layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button {
	    outline: 0;
	    -webkit-appearance: none;
	    transition: all .3s;
	    -webkit-transition: all .3s;
	    box-sizing: border-box;
	}
	.layui-layer-content{
	    margin-left: 20px;
	}
}
</style>

<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>区域服务设置</h3>
                <h5></h5>
            </div>
            {include file="public/admin_items" /}
        </div>
    </div>
    <div class="fixed-empty"></div>

    <div class="ds-search-form">
        <dd>
            <a style="height:32px; line-height: 32px;" class="btn" href="{:url('Sellerareabill/export_step1')}" class="btn btn-default" >导出Excel</a>
        </dd>
        </dl>
    </div>



 <div class="dssc-form-default">
    <form id="add_form" action="{if isset($edit_goods_sign)}{:url('Sellerareabill/edit_config_waybill')}{else/}{:url('Sellerareabill/waybill_save')}{/if}" method="post" enctype="multipart/form-data">
<!-- 判断是修改还是添加 -->
{if isset($edit_goods_sign)&&isset($area)}
        <dl class='area'>
            <dd><div class="div-none" >
                <div class="layui-input-block">
                    <table class="dssc-default-table" style="margin-left: 70px;">
                        <thead>
                        <tr>
                            <th>默认送货上门费用</th>
                            <th>默认安装费用</th>
                            <th>默认维修费用</th>
                            <th>默认保养费用</th>
                            <th>默认拆移费用</th>
                        </tr>
                        </thead>
                        <tbody >
                        <tr>
                            <td>
                                <input type="text" style="width: 50px;margin-left: -16px;margin-top: 10px;" name="config[install_home_money]" value="{$config.install_home_money}" required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" style="width: 50px;margin-left: -16px;margin-top: 10px;" name="config[install_money]" value="{$config.install_money}" required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" style="width: 50px;margin-left: -16px;margin-top: 10px;" name="config[mintain_money_price]" value="{$config.mintain_money_price}" required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" style="width: 50px;margin-left: -16px;margin-top: 10px;" name="config[upkeep_money_price]" value="{$config.upkeep_money_price}" required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" style="width: 50px;margin-left: -16px;margin-top: 10px;" name="config[move_money_price]" value="{$config.move_money_price}" required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <dd>

        </dl>

 <dl class='area'>
           <dd><div class="div-none" >
            <div class="layui-input-block">
                <table class="dssc-default-table" style="margin-left: 70px;">
                    <thead>
                    <tr>
                        <th>选择地区</th>
                        <th>安装上门费用</th>
                        <th>安装费用</th>
                        <th>维修费用</th>
                        <th>保养费用</th>
                        <th>拆移费用</th>
                        <th style="width: 200px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="view">
                        {foreach name="area" key='key' item="v" }
                    <tr data-id="0">
                        <td style="width: 100px;" >
                            <input type='hidden' name="area_id[{$key}]" class="area_id_list" value='{$v.area_id}' data_name='' id='0'>
                            {if isset($v.area_name)}
                            <input type='hidden' name="area_name[{$key}]" class="area_name_input_hidden" value='{$v.area_name}' data_name='' id='0'>
                            <a href="javascript:void(0);"  style="color: #999">已选择地区：{$v.area_name}</a>
                            {else/}
                            <a href="javascript:void(0);"  style="color: #999">暂未选择</a>
                            {/if}
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">安装上门费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="install_home_area_price[{$key}]" value={$v.install_home_area_price} required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">安装费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="install_area_price[{$key}]" value={$v.install_area_price} required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <!--<label class="layui-form-label">维修费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="mintain_money_price[{$key}]" value={$v.mintain_money_price} required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">保养费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="upkeep_money_price[{$key}]" value={$v.upkeep_money_price} required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <!--<label class="layui-form-label">拆移费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="move_money_price[{$key}]" value={$v.move_money_price} required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>

                        <td>
                            <a class="layui-btn layui-btn-xs addarea-class">
                                添加地区
                            </a>
                            {if $key!=0}
                            <a class="layui-btn layui-btn-danger layui-btn-xs del-class" style="background-color: #393D49 !important;">
                                删除
                            </a>
                            {/if}
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
 <dd>

 </dl>

 {else/}
 <dl class='area'>
           <dd><div class="div-none" >
            <div class="layui-input-block">
                <table class="dssc-default-table" style="margin-left: 70px;">
                    <thead>
                    <tr>
                        <th>选择地区</th>
                        <th>安装上门费用</th>
                        <th>安装费用</th>
                        <th>维修费用</th>
                        <th>保养费用</th>
                        <th>拆移费用</th>
                        <th style="width: 200px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="view">
                    <tr data-id="0">
                        <td style="width: 100px;">
                            <input type='hidden' name='area_id[0]' value='' data_name='' id='0'>
                            <a href="javascript:void(0);" class="selectArea" style="color: #46a751;">请选择地区</a>
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">安装上门费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;"  name="install_home_area_price[0]"  required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">安装费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;"  name="install_area_price[0]"  required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                           <!-- <label class="layui-form-label">维修费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="mintain_money_price[0]"  required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <!--<label class="layui-form-label">保养费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="upkeep_money_price[0]"  required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <!--<label class="layui-form-label">拆移费用：</label>-->
                            <input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="move_money_price[0]"  required value="0" lay-verify="required" placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <a class="layui-btn layui-btn-xs addarea-class">
                                添加地区
                            </a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs del-class" style="background-color: #393D49 !important;">
                                删除
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
 <dd>
 </dl>
{/if}


        <div class="bottom">
            <input type="submit" class="submit" value="{$Think.lang.ds_submit}">
        </div>
    </form>
</div>


<!-- 地区代码 -->
  <div class="list" style='display:none;margin-left: 20px;'  >
      <input style="margin-right: 8px;" type="checkbox"  id="checkboxs" name="checkall">全选
    <?php foreach($top_area as $k=>$v){ ?>
    <div class="top">

    <span style="font-family: 'dtreefont' !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: rgba(0,0,0,0);" class='select_choose dtreefont dtree-icon-jia dtree-theme-dtreefont dtree-theme-ficon' data-spread="close">
    </span>
    <input style="margin-right: 8px;" type="checkbox"  value="<?php echo $v['area_id']; ?>" class="top" area_deep="1" ids="<?php echo $v['last_ids']; ?>"  data_name="<?php echo $v['area_name']; ?>">
      <?php echo $v['area_name']; ?>
    <div class="sec<?php echo $v['area_id']; ?>" style='padding-left:20px; margin:10px;'></div>
    </div>
    <?php }?>
  </div>
</div>
 <script>
     //数组去重
     function unique(arr) {
         var ret = []

         for (var i = 0; i < arr.length; i++) {
             var item = arr[i]
             if (ret.indexOf(item) === -1) {
                 ret.push(item)
             }
         }

         return ret
     }

     //全选
     $(document).on('click','#checkboxs',function(){
         if($(this).prop('checked')) {
             $(".top").find('input:checkbox').prop("checked", true);
         } else {
             $(".top").find('input:checkbox').prop("checked", false);
         }

     });

     $(document).ready(function() {
         $("form").submit(function(e){
                 var url = $('form').attr('action');
                 var area_id = $('input[name="area_id[0]"]').val();
                 var area_type = $("#area_type").val();
                 if(area_id==''&&area_type=='1'){
                     layer.msg('请设置区域');return false;
                 }else if(typeof area_id=='undefined'&&area_type=='1'){
                     layer.msg('请设置区域');return false;
                 }else{
                     $.ajax({
                         type: "POST",
                         url:url,
                         data:$('#add_form').serialize(),// 你的formid

                         error: function(request) {
                             alert("Connection error");
                         },
                         success: function(result) {
                          //   alert(result);return false;
                             if(result.code==0){
                                 layer.msg(result.msg);
                                 location.href=result.url;return false;
                             }else{
                                 layer.msg(result.msg);
                                 location.href=result.url;return false;s

                             }
                         }
                     });
                     return false;


                 }return false;

         });



     });

$(function(){

 {if isset($edit_goods_sign)}
  {else/}
  // $(".area").hide();
  {/if}
  var selected_area_arr = []; // 用于存储已经选择的地区
      $(function () {
          $('.area_name_input_hidden').each(function () {
              var arr = $(this).val().split(',');
              for (i in arr) {
                  selected_area_arr.push(arr[i])
              }
          })
      })
   $(document).on('change','#area_type',function(){
         var type = $(this).val();
            if (type == '1') {
                $(".area").show();
            } else {
                $(".area").hide();
            }
        });

   $(document).on('click', '.addarea-class', function() {
       $('input[type="checkbox"]:checked').each(function(){
           console.log($(this).attr('data_name'));
       });

            var lastId = $(this).parent().parent().parent().find('tr').last().attr('data-id');

            var id = parseInt(lastId) + 1;
            htmls='<tr data-id="'+id+'">' +
                '<td>' +
                '<input type="hidden" id="'+id+'" data_name="">' +
                '<a href="javascript:void(0); "class="selectArea" style="color: #46a751;">请选择地区</a>' +
                '</td>' +

                '<td>' +
                '<!--<label class="layui-form-label">安装上门费用：</label>-->' +
                '<input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;"  name="install_home_area_price['+id+']" required value="0" lay-verify="required"  autocomplete="off" class="layui-input seller-inline-1">' +
                '</td>' +

                '<td>' +
                '<!--<label class="layui-form-label">安装费：</label>-->' +
                '<input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;"  name="install_area_price['+id+']" required value="0" lay-verify="required"  autocomplete="off" class="layui-input seller-inline-1">' +
                '</td>' +

                '<td>' +
                '<!--<label class="layui-form-label">维修费：</label>-->' +
                '<input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="mintain_money_price['+id+']" required value="0" lay-verify="required" autocomplete="off" class="layui-input seller-inline-1">' +
                '</td>' +

                '<td>' +
                '<!--<label class="layui-form-label">保养费：</label>-->' +
                '<input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="upkeep_money_price['+id+']" required value="0" lay-verify="required"  autocomplete="off" class="layui-input seller-inline-1">' +
                '</td>' +

                '<td>' +
                '<!--<label class="layui-form-label">拆移费：</label>-->' +
                '<input type="text" style="width: 50px;margin-left: -10px;margin-top: 10px;" name="move_money_price['+id+']" required value="0" lay-verify="required" autocomplete="off" class="layui-input seller-inline-1">' +
                '</td>' +

                '<td>' +
                '<a class="layui-btn layui-btn-xs addarea-class">添加地区</a>&nbsp;<a class="layui-btn layui-btn-danger layui-btn-xs del-class" style="background-color: #393D49 !important;">删除</a>' +
                '</td>' +
                '' +
                '</tr>';

           $("#view").append(htmls);
        });

     $(document).on('click', '.del-class', function() {
         // 检测剩余条数
         // 上边没有了
         if (!$(this).parent().parent().prev().html()) {
            // 下边还有没有
             if (!$(this).parent().parent().next().html()) {
                alert('必须保留一条数据');
                 return false;
             }
         }

         $(this).parent().parent().remove();
    });


   $(document).on('click', '.selectArea', function() {

        id = $(this).parent().parent().attr('data-id');
       var input  = $('.list').find('input').each(function(){
           $(this).attr('class','aaa');
   });
       var $list = $('.list').html();
       $('.list').find('input').each(function(){
           $(this).attr('class','');
       });
     obj = $(this);

     var index = layer.confirm('',{
            title: '地区选择',
            type: 1,
            area: ['700px', '450px'],
            fixed: false,
            maxmin: true,
            btn: ['确认', '取消'],
            content :$list,
        }, function () {
            var chk_value =[];
            var data_names =[];
            $('input[type="checkbox"]:checked').each(function(){
                if($(this).attr('class') != 'aaa'){
                    return true;
                }
            chk_value.push($(this).attr('ids'));
            data_names.push($(this).attr('data_name'));
            });
             var area_name =  unique(data_names);
             if(chk_value==''){
                 layer.closeAll();
             }else{
                 // TODO 将已选择的地区放到一个变量里边，去除重复地区
                 var is_select = []; // 用于重复的区域
                 for (i in area_name) {
                     var v = area_name[i];
                     // 判断是否已经选择过该地区了，选择了就去掉
                     var is_find = selected_area_arr.find(function (value, index, arr) {
                         return value == v;
                     })
                     if (is_find) {
                         is_select.push(area_name[i]);
                         layer.msg(v+':已经存在不得重复选择');
                         area_name.splice(i, 1);
                     }
                 }
                 for (i in area_name) {
                     selected_area_arr.push(area_name[i])
                 }

                 html ='已选地区：'+area_name;

                 html+="<input type='hidden' name='area_id["+id+"]' value='"+chk_value+"'>";
                 html+="<input type='hidden' name='area_name["+id+"]' value='"+area_name+"'>";
                 $(".top").find('input:checkbox').prop("checked", false);
                 obj.parent().html(html);
                 layer.close(index);
             }

        });

});




 $(document).on('click', '.select_choose', function() {
    var choose_id = $(this).next().val();
    var obj = $(this);
     $.ajax({
            type: 'POST',
            url: "{:url('Sellerareabill/ajax_area')}",
            cache: false,
            data: {choose_id:choose_id},
            dataType: 'json',
            success: function (data) {
                var htmls = '';
              $.each(data, function(k,v) {
                if(v.area_deep!=3){
                     htmls+='<span style="font-family: \'dtreefont\' !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: rgba(0,0,0,0);" class="select_choose dtreefont dtree-icon-jia dtree-theme-dtreefont dtree-theme-ficon"></span><input type="checkbox" class="aaa"  area_deep="'+v.area_deep+'" value="'+v.area_id+'" ids="'+v.last_ids+'" data_name="'+v.top_name+'" > '+v.area_name+' <div class="last'+v.area_id +'" style="padding-left:20px; margin:10px;"></div>';
                }else{
                     htmls+='<i class="dtree-icon-shuye1 dtreefont-special dtree-theme-dtreefont dtree-theme-icon"></i>'+'<input type="checkbox" id="p3"  ids="'+v.areacode+'"    area_deep="'+v.area_deep+'" data_name="'+v.top_name+'" class="aaa" >'+v.area_name;
                }
                });
              if( $(".sec"+choose_id).length>0){
                $(".sec"+choose_id).html(htmls);
               obj.attr("class","area_hidden dtree-theme-dtreefont dtree-theme-ficon dtreefont dtree-icon-jian");
      }else{
                $(".last"+choose_id).html(htmls);
                obj.attr("class","area_hidden dtree-theme-dtreefont dtree-theme-ficon dtreefont dtree-icon-jian");
            }
                if (obj.next().prop('checked')) {
                    obj.next().next().find('input:checkbox').prop('checked', true);
                } else {
                    $('input[name="checkall"]').prop('checked', false);
                    obj.next().next().find('input:checkbox').prop('checked', false);
                }
}
        })


});

     $(document).on('click', '.area_hidden', function() {
    var choose_id = $(this).next().val();
    $(".sec"+choose_id).empty();
    $(".last"+choose_id).empty();
    var obj = $(this);
     obj.attr("class","select_choose dtreefont dtree-icon-jia dtree-theme-dtreefont dtree-theme-ficon");
});

      //点击地区复选框
      $(document).on('click', 'input:checkbox', function () {
          if ($(this).attr('area_deep') == 2) {
              if ($(this).prop('checked')) {
                  $(this).next().find('input:checkbox').prop('checked', true);
              } else {
                  $('input[name="checkall"]').prop('checked', false);
                  //子集
                  $(this).next().find('input:checkbox').prop('checked', false);
                  //顶级
                  $(this).parent('div').parent('div').find('input:checkbox:first').prop('checked', false);
              }
          } else if ($(this).attr('area_deep') == 1) {

              if ($(this).prop('checked')) {
                  $(this).parent('div').find('input:checkbox').prop('checked', true);
              } else {
                  $('input[name="checkall"]').prop('checked', false);
                  $(this).parent('div').find('input:checkbox').prop('checked', false);
              }

          } else {

              if (!$(this).prop('checked')) {
                  $('input[name="checkall"]').prop('checked', false);
                  $(this).parent('div').parent('div').find('input:checkbox').first().prop('checked', false);
                  $(this).parent('div').parent('div').parent('div').find('input:checkbox').first().prop('checked', false);
              }

          }
      });

});





</script>
{include file="public/footer" /}




